import React from 'react';
import {Row,Col} from 'antd';
import {
	Menu,
	Icon,
	Tabs,
	message,
	Form,
	Input,
	Button,
	CheckBox,
	Modal
} from 'antd';
import {Router, Route, Link, browserHistory} from 'react-router';
const FormItem=Form.Item;
const SubMenu = Menu.SubMenu;
const TabPane=Tabs.TabPane;
const MenuItemGroup = Menu.ItemGroup;
class MHeader extends React.Component {
	constructor() {
		super();
		this.state = {
			current: 'top',
			modalVisible:false,
			action:'login',
			hasLogined:false,
			userNickName:'',
			userid:0
		};
	};
	//刷新登录状态
	componentWillMount() {
	if(localStorage.userid!=''){
		this.setState({hasLogined:true});
		this.setState({userNickName:localStorage.userNickName,userid:localStorage.userid});
	}	
	};
	setModalVisible(value){
		this.setState({
			modalVisible:value
		});
	};
	handleClick(e){
		if(e.key="register"){
			this.setState({current:'regsiter'});
			this.setModalVisible(true);
		}else {
			this.setState({current:e.key});
		}
	};
	//页面开始向API开始提交
	handleSubmit(e){
		//阻止事件冒泡
		e.preventDefault();
		var myFetchOptions={
			method:"GET"
		};
		var formData=this.props.form.getFieldsValue();
		console.log(formData);
		fetch("http://newsapi.gugujiankong.com/Handler.ashx?action="
			+this.state.action+"&username="+formData.userName+"&password="+formData.password
			+"&r_userName="+formData.r_userName+"&r_password="+formData.r_password+"&r_confirmPassword="
			+formData.r_confirmPassword,
			myFetchOptions)
		.then(response=>response.json())
		.then(json=>{
			this.setState({
				userNickName:json.NickUserName,
				userid:json.UserId
			});
			//本地存储
			localStorage.userid=json.UserId;
			localStorage.userNickName=json.NickUserName;
		});
		if(this.state.action=="login"){
			this.setState({hasLogined:true});
		}
		message.success("请求成功！");
		this.setModalVisible(false);
	};
	login() {
		this.setModalVisible(true);
	};
	callback(key){
		if(key==1){
			this.setState({action:'login'});
		}else if(key==2){
			this.setState({action:'register'});
		}
	};
	logout(){
		localStorage.userid='';
		localStorage.userNickName='';
		this.setState({hasLogined:false});
	};
	render() {
		let { getFieldDecorator }=this.props.form;
		const userShow=this.state.hasLogined ? 
		<Icon type="inbox" onClick={this.logout.bind(this)}></Icon>
		:
		<Icon type="setting" onClick={this.login.bind(this)}></Icon>;
		return (
			<div id="mobileheader">
			<header>
			<img src="./src/images/logo.png" alt="logo"/>
            <span>ReactNews</span>
            {userShow}
			</header>

			<Modal title="用户中心" wrapClassName="vertilcal-center-modal" visible={this.state.modalVisible} 
			onCancel={()=>this.setModalVisible(false)} 
			onOk={()=>this.setModalVisible(false)} 
			onText="关闭">
				<Tabs type="card" onChange={this.callback.bind(this)}>
				    <TabPane tab="登录" key="1">
						<Form onSubmit={this.handleSubmit.bind(this)}>
						<FormItem label="账户">
							{getFieldDecorator('userName', {rules: [{ required: true, message: 'Please input your userName!' }],})
							(<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="userName" />)}
						</FormItem>
						<FormItem label="密码">
							{getFieldDecorator('password', {rules: [{ required: true, message: 'Please input your Password!' }],})
							(<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />)}
						</FormItem>
						<Button type="primary" htmlType="submit">登录</Button>

						</Form>
					</TabPane>
					<TabPane tab="注册" key="2">
						<Form onSubmit={this.handleSubmit.bind(this)}>
						<FormItem label="账户">
						{getFieldDecorator('r_userName')(<Input placeholder="请输入您的账号" />)}
						</FormItem>
						<FormItem label="密码">
						{getFieldDecorator('r_passWord')(<Input placeholder="请输入您的密码" />)}
						</FormItem>
						<FormItem label="确认密码">
						{getFieldDecorator('r_confirmPassword')(<Input placeholder="请再次输入您的密码" />)}							
						</FormItem>
						<Button type="primary" htmlType="submit">注册</Button>

						</Form>
					</TabPane>
				</Tabs>
			</Modal>
			</div>

		);
	};
}
export default MHeader=Form.create({})(MHeader);
